<!-- FooterBtn 底部支付按钮 -->
<template>
  <view class="FooterBtn">
    <view class="top flex flex-m" v-if="!onlyBtn">
      <slot name="title">
        <view>{{ title }}</view>
      </slot>

      <view class="price-box flex-1 tr">
        <slot name="price">
          <text class="price">{{ price | toFixed(num) }}</text>
          <text>{{ ticketPriceUnit }}</text>
        </slot>
        <template v-if="delPrice">
          <view class="del inline-block del-price ml10">
            <text class="price">{{ delPrice | toFixed(num) }}</text>
            <text>{{ ticketPriceUnit }}</text>
          </view>
        </template>
      </view>
    </view>
    <view class="top" v-if="isHeader">
      <slot name="header" />
    </view>

    <yy-button @click="handleClick" :disabled="disabled" class="yy-button" size="large">
      {{ btnTxt }}
    </yy-button>
  </view>
</template>

<script>
  export default {
    name: 'FooterBtn',
    props: {
      onlyBtn: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '总价'
      },
      price: {
        type: [String, Number]
      },
      btnTxt: {
        type: String,
        default: '立即购买'
      },
      // 价格预留小数
      num: {
        type: Number,
        default: 2
      },
      disabled: {
        type: Boolean,
        default: false
      },
      delPrice: [String, Number],
      isHeader: Boolean
    },
    data() {
      return {}
    },
    computed: {
      ticketPriceUnit() {
        return this.$auth.getLocBaseSet().ticketPriceUnit || '元'
      }
    },
    methods: {
      // 初始化方法
      init() {},
      handleClick() {
        this.$emit('click')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .FooterBtn {
    position: relative;
    width: 100%;
    max-height: 1.82 * 100rpx;
    padding: 0.2rem 0.3 * 100rpx;
    box-sizing: border-box;
    font-size: 0.3 * 100rpx;
    color: $black;
    border-top: solid 1rpx #eee;
    .top {
      margin-bottom: 0.05 * 100rpx;
    }
    .price-box {
      color: $yellow;
      .price {
        margin-right: 0.05 * 100rpx;
        font-size: 0.42 * 100rpx;
      }
    }

    .yy-button {
      height: 0.88rem !important;
      line-height: 0.88rem !important;
    }
    .del-price {
      color: #b7b7b7;
    }
  }
</style>
